{% extends "buyer/base.html" %}
{% block title %}
    所有商品
{% endblock %}
{% block style %}
    <script src="/static/buyer/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/buyer/css/bootstrap.css"/>
    <link rel="stylesheet" href="/static/buyer/css/footer.css">
    <link rel="stylesheet" href="/static/buyer/css/list.css">
    <link rel="stylesheet" href="/static/buyer/css/search.css">
    <script src="/static/buyer/js/bootstrap.js"></script>

    <script src="/static/buyer/vue/vue.min.js"></script>
    <script src="/static/buyer/vue/vue-resource.js"></script>
{% endblock %}
{% block ys %}
    <div class="container">
    <!--2.搜索框开始-->
    <div class="search col-sm-12">
        <div class="row">
            <!--左边图片和文字-->
            <div class="col-lg-5">
                <img src="/static/buyer/images/logo.png" alt="..." class="img-rounded">
                <span>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;所有商品</span>
            </div>
            <!--右边表单-->
            <div class="col-lg-6 col-lg-offset-1 search_bar">
                <form action="">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="搜索商品">
                        <span class="input-group-btn">
                    <button class="btn btn-success" style="padding: 6px 50px" type="submit">搜索</button>
                </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}
{% block content %}
    <div>
        <div class="col-xs-12 col-sm-2">
            <ul class="list-group">
                <li class="list-group-item active">全部商品分类</li>
            </ul>

        </div>
        <div class="col-xs-12 col-sm-10">
            <ul class="nav nav-tabs">
                <li role="presentation" class="active"><a href="#">首页</a></li>
                <li role="presentation"><a href="#">手机生鲜</a></li>
                <li role="presentation"><a href="#">抽奖</a></li>
            </ul>
        </div>
    </div>
    <div>
        <p class="col-xs-12">全部分类 > 新鲜水果</p>
    </div>
    <div>
        <div class="col-xs-12 col-sm-2">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title text-center newheight">新品推荐</h3>
                </div>
                <div class="panel-body">
                    <div class="col-xs-12 col-sm-12">
                        <a href="/buyer/detail/" class="thumbnail">
                            <img src="/static/buyer/images/goods/goods001.jpg" class="img-responsive">
                            <p class="text-center">进口柠檬</p>
                            <p class="text-center">￥3.90</p>
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-12">
                        <a href="#" class="thumbnail">
                            <img src="/static/buyer/images/goods/goods002.jpg" class="img-responsive">
                            <p class="text-center">玫瑰香葡萄</p>
                            <p class="text-center">￥16.80</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>


        {% verbatim %}

        <div id="content">

            <div class="col-xs-12 col-sm-10">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <ul class="nav nav-pills">
                            <li><a href="">默认</a></li>
                            <li><a href="">价格</a></li>
                            <li><a href="">人气</a></li>
                        </ul>
                    </div>
                    <div class="panel-body">
                        <div class="col-xs-12 col-sm-3" v-for="one in goods_list">
                            <a v-bind:href="'/buyer/detail/'+one.id" class="thumbnail">

                                <img v-bind:src="'/static/buyer/'+one.g_pricutre" class="img-responsive">

                            </a>
                            <p class="text-center">{{ one.g_name}}</p>

                            <p class="text-center myps"><span>￥{{one.g_price}}</span>
                                <span>{{ one.g_price }}/500g</span>
                                <span><img src="/static/buyer/images/carts.png" v-on:click="add_cart(one.id)"></span>
                            </p>
                        </div>

                    </div>
                </div>
                <div class="col-xs-12 col-sm-8 col-sm-offset-4">
                    <ul class="pagination col-xs-12 col-sm-8 col-sm-offset-2">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">上一页</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">下一页</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>


        </div>
        {% endverbatim %}
    </div>

    </div>
{% endblock %}
{% block js %}
    <script>
        new Vue({
            el: "#content",
            data: {
                goods_list: [],
                next_url:"",
                prev_url:"",
            },
            created: function () {
                var url = "http://127.0.0.1:8000/buyer/redata/?type_id={{ t_id }}";
                this.$http.get(url)
            },
            method:{
                getdata:function (url) {
                    this.$http.get(url).then(
                        // 赋值 动态数据绑定的过程
                        function (data) {
                            this.goods_list = data.data.results;
                            this.next_url = data.data.next;
                            this.prev_url = data.data.previous;
                        },   // 类似于ajax中的error
                    )
                },
                getprev:function () {
                    // 发送请求 获取到上一页的url
                    if (this.prev_url){
                        this.getdata(this.prev_url)
                    }
                },
                getnext:function () {
                    this.getdata(this.next_url)
                },
                add_cart:function (id) {
                    console.log("add cart")
                    var url = "/buyer/addcart/?goods_id=" + id;
                    this.$http.get(url).then(
                        function (data) {
                            console.log(data)
                            alert(data.data.msg)
                    },
                        function (error) {
                            console.log(error)
                        }
                    )

                }
            }
        })
    </script>
{% endblock %}


